<template>
  <div id="app">
    <!-- <nav-bar />
   <router-view /> -->
   <header>
     <router-view name="header">
       <!-- <search-bar :fonts = "fonts"/> -->
     </router-view>
   </header>
   <main>
     <router-view />
   </main>
   <footer>
     <router-view name="footer"/>
   </footer>
   <!-- <tab-bar :navs= "navs" /> -->
  </div>
</template>
<script>
// import TabBar from '@/components/tab-bar'
// import SearchBar from '@/components/search-bar'
// import NavBar from '@/components/nav-bar'
export default {
  name: 'app',
  // components: {
  //   TabBar,
  //   // SearchBar,
  // },
}
</script>
<style lang="less">
html,body{
  height: 100%;
  #app{
    height: 100%;
    display: flex;
    flex-direction: column;
    main{
      flex: 1;
      overflow-x: hidden;
    }
  }
}
</style>
